<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Vue.set的使用</title>
</head>
<body>
    <div id="app">
        <button @click="addSex">为学生添加一个性别属性</button> <button @click="deleteSex">删除学生性别属性</button>
        <div style="color:red">
            <b>Vue.set()方法，第一个参数不能是vm，也就是this，同理Vue.delete()也是
            </b>
        </div>
        <h1>姓名：{{student.name}}, </h1>
        <h1>真实年龄：{{student.age.rage}}， 对外年龄 {{student.age.sage}}</h1>
        <h1 v-if="student.sex">性别：{{student.sex}}</h1>
        <hr>
        <ul>
            <li v-for="p in student.friends" :key="p.name">
                <b>{{p.name}}--{{p.age}}</b>
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                student:{
                    name:'tom',
                    age:{
                        rage:40,
                        sage:29
                    },
                    friends:[
                        {name:'Amy',age:13},
                        {name:'Jake',age:23},
                    ]
                }
            },
            methods:{
                addSex(){
                    Vue.set(this.student, 'sex', '男')
                    // this.$set(this.student, 'sex', '男')  // 第二种写法
                },
                deleteSex(){
                    Vue.delete(this.student, 'sex')
                }
            }
        })

        // 使用Vue.set(target, key, value)为对象添加一个动态属性
        // Vue.set(vm.student, 'sex', '男')
        // vm.$set(vm.student, 'sex', '女')
    </script>
</body>
</html>